<template>
	<view class="base-swiper-component">
		<swiper
			circular
			class="swiper-content"
			:indicator-dots="false"
			:autoplay="true"
			:interval="2000"
			:duration="500"
			@change="change"
		>
			<swiper-item
				v-for="(item, index) in list"
				:key="index"
			>
				<view class="swiper-item">
					<image :src="item.picUrl" mode="aspectFill" class="icon-banner"></image>
				</view>
			</swiper-item>
		</swiper>
		<view v-if="list.length > 0" class="indicator-dots">
			<view
				v-for="(item, index) in list"
				:key="index"
				class="indicator-dots-item"
				:class="{
					active: index === active
				}"
			></view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: Array
	},
	data () {
		return {
			active: 0
		}
	},
	methods: {
		change (event) {
			this.active = event.detail.current
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>